'use client';

import {
  Header as SemanticHeader,
  Nav,
  Main,
  Section,
  Article,
  Footer as SemanticFooter,
  Aside,
  H1,
  H2,
  H3,
  H4,
  P,
  Ul,
  Ol
} from '@/components/typography';
import Link from 'next/link';
export default function SemanticHTMLLearnPage() {
  return (
    <div className="min-h-screen bg-gray-100">
      {/* Header section using semantic HTML */}
      <SemanticHeader className="bg-blue-600 text-white p-4 shadow-md">
        <div className="container mx-auto flex justify-between items-center">
          <H1 className="text-2xl font-bold">Semantic HTML Learning</H1>
          <Nav>
            <Ul className="flex space-x-4 list-none">
              <li><Link href="#" className="hover:underline">Home</Link></li>
              <li><Link href="#" className="hover:underline">About</Link></li>
              <li><Link href="#" className="hover:underline">Contact</Link></li>
            </Ul>
          </Nav>
        </div>
      </SemanticHeader>

      {/* Main content area */}
      <Main className="container mx-auto p-4">
        <Section className="mb-8">
          <H2 className="text-3xl font-bold mb-4">Understanding Semantic HTML</H2>
          <P className="mb-4">
            Semantic HTML introduces meaning to the web page rather than just presentation.
            It makes web content more accessible and SEO-friendly by clearly defining the purpose
            of different sections.
          </P>

          <Article className="bg-white p-6 rounded-lg shadow-md mb-6">
            <H3 className="text-2xl font-semibold mb-2">Why Semantic HTML Matters</H3>
            <P className="mb-4">
              Semantic elements provide context and meaning to both browsers and developers.
              They help search engines understand the content structure and improve accessibility
              for users with disabilities.
            </P>

            <H4 className="text-xl font-medium mb-2">Key Benefits:</H4>
            <Ul className="list-disc pl-6 mb-4">
              <li>Improved accessibility for screen readers</li>
              <li>Better SEO performance</li>
              <li>Easier maintenance and code readability</li>
              <li>Enhanced semantics for web crawlers</li>
            </Ul>

            <img
              src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&#38;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&#38;auto=format&#38;fit=crop&#38;w=800&#38;q=80"
              alt="Code editor showing semantic HTML elements"
              className="w-full h-64 object-cover rounded-md mb-4"
            />

            <P>
              By using semantic elements like <code className="bg-gray-200 px-1 rounded">&#60;header&#62;</code>,
              <code className="bg-gray-200 px-1 rounded">&#60;nav&#62;</code>,
              <code className="bg-gray-200 px-1 rounded">&#60;main&#62;</code>, and
              <code className="bg-gray-200 px-1 rounded">&#60;footer&#62;</code>, we create a more
              meaningful structure for our web pages.
            </P>
          </Article>
        </Section>

        <div className="flex flex-col md:flex-row gap-6">
          <Section className="md:w-2/3">
            <H2 className="text-3xl font-bold mb-4">Common Semantic Elements</H2>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="bg-white p-6 rounded-lg shadow-md">
                <H3 className="text-2xl font-semibold mb-3">Structural Elements</H3>
                <Ol className="list-decimal pl-6 space-y-2">
                  <li><strong>&#60;header&#62;</strong> - Represents introductory content</li>
                  <li><strong>&#60;nav&#62;</strong> - Contains navigation links</li>
                  <li><strong>&#60;main&#62;</strong> - Primary content of the page</li>
                  <li><strong>&#60;article&#62;</strong> - Self-contained content</li>
                  <li><strong>&#60;section&#62;</strong> - Thematic grouping of content</li>
                  <li><strong>&#60;aside&#62;</strong> - Content tangentially related to main content</li>
                  <li><strong>&#60;footer&#62;</strong> - Footer information for parent section</li>
                </Ol>
              </div>

              <div className="bg-white p-6 rounded-lg shadow-md">
                <H3 className="text-2xl font-semibold mb-3">Text-level Elements</H3>
                <Ul className="list-disc pl-6 space-y-2">
                  <li><strong>&#60;h1&#62; to &#60;h6&#62;</strong> - Headings with different levels</li>
                  <li><strong>&#60;p&#62;</strong> - Paragraphs of text</li>
                  <li><strong>&#60;strong&#62;</strong> - Strong importance</li>
                  <li><strong>&#60;em&#62;</strong> - Emphasized content</li>
                  <li><strong>&#60;blockquote&#62;</strong> - Quotations</li>
                  <li><strong>&#60;code&#62;</strong> - Inline code snippets</li>
                  <li><strong>&#60;time&#62;</strong> - Date/time information</li>
                </Ul>
              </div>
            </div>
          </Section>

          {/* Aside component added here */}
          <Aside className="md:w-1/3 bg-white p-6 rounded-lg shadow-md h-fit">
            <H3 className="text-2xl font-semibold mb-4">Did You Know?</H3>
            <P className="mb-4">
              Semantic HTML elements were introduced in HTML5 to improve the structure and meaning of web content.
            </P>
            <P>
              Using semantic elements helps search engines better understand your content, which can improve your site&#39;s SEO ranking.
            </P>
          </Aside>
        </div>

        <Section className="bg-white p-6 rounded-lg shadow-md mt-6">
          <H2 className="text-3xl font-bold mb-4">Practical Example</H2>
          <P className="mb-4">
            Here&#39;s a practical example of how semantic HTML creates a well-structured document:
          </P>

          <div className="border rounded-md p-4 bg-gray-50">
            <span className="font-mono text-sm">
{`<body>
  <header>
    <h1>Website Title</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <article>
      <h2>Article Title</h2>
      <p>Article content goes here...</p>
    </article>
    
    <aside>
      <h3>Related Content</h3>
      <p>Sidebar content...</p>
    </aside>
  </main>
  
  <footer>
    <p>&#169; 2023 Website Name. All rights reserved.</p>
  </footer>
</body>`}
            </span>
          </div>
        </Section>
      </Main>

      {/* Footer section using semantic HTML */}
      <SemanticFooter className="bg-gray-800 text-white p-6 mt-8">
        <div className="container mx-auto">
          <div className="flex flex-col md:flex-row justify-between">
            <div className="mb-4 md:mb-0">
              <H4 className="text-xl font-semibold mb-2">About This Guide</H4>
              <P className="text-gray-300">
                This page demonstrates proper use of semantic HTML elements for better
                accessibility and SEO.
              </P>
            </div>

            <div>
              <H4 className="text-xl font-semibold mb-2">Resources</H4>
              <Ul className="space-y-1 list-none">
                <li><Link href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" className="text-blue-300 hover:underline">MDN HTML Elements</Link></li>
                <li><Link href="https://www.w3.org/TR/html52/" className="text-blue-300 hover:underline">W3C HTML5 Specification</Link></li>
              </Ul>
            </div>
          </div>

          <div className="border-t border-gray-700 mt-6 pt-4 text-center text-gray-400">
            <P>&#169; 2023 Semantic HTML Learning. All rights reserved.</P>
          </div>
        </div>
      </SemanticFooter>
    </div>
  );
}
